<template>
  <view class="page">
    <Header :title="'抗遗忘复习'"></Header>
    <view class="main_container">
      <view class="main_content">
        <view class="content">
          <view class="tabs"> <reviewTabs :current="0"></reviewTabs> </view>
          <view class="box">
            <view class="box_left">
              <view class="chinese">
                <template v-if="isShowTips">
                  {{ wordData.wordParaphrase }}
                </template>
              </view>
              <view class="input">
                <u-input
                  type="text"
                  placeholder="此处默写单词"
                  placeholder-style="font-size:36rpx;color: #929292;"
                  v-model.trim="wordValue"
                />
                <view class="input_bg" v-if="isShowAnswer"></view>
              </view>
              <view class="englist">
                <template v-if="isShowAnswer"> {{ wordData.word }} </template>
              </view>
              <view class="result">
                <template v-if="isShowResult">
                  <view class="result_img">
                    <image
                      src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/review/flower.png"
                      mode="scaleToFill"
                    />
                  </view>
                  <view class="result_text" v-if="isCorrect">
                    太棒了！答对了!
                  </view>
                  <view class="result_text" v-else> 答错了! </view>
                </template>
              </view>
            </view>
            <view class="box_right">
              <view class="title">单词拼写</view>
              <template v-if="isShowResult">
                <view class="btn">
                  <view class="btn_content bg2" @click="play()">
                    <image
                      src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/yinliang2.png"
                      mode="scaleToFill"
                    />
                  </view>
                  <view
                    class="btn_content bg3"
                    @click="next()"
                    v-if="isCorrect"
                  >
                    <text>下一个</text>
                  </view>
                  <view class="btn_content bg3" @click="rewrite()" v-else>
                    <text>重写</text>
                  </view>
                </view>
              </template>
              <template v-else>
                <template v-if="!isShowAnswer">
                  <view class="btn">
                    <view class="btn_content bg1" @click="tips()">
                      <text>提示</text>
                    </view>
                    <view class="btn_content bg2" @click="lookAnswer()">
                      <text>看答案</text>
                    </view>
                    <view class="btn_content bg3" @click="submit()">
                      <text>提交</text>
                    </view>
                  </view>
                </template>
                <template v-else>
                  <view class="btn">
                    <view class="btn_content bg2" @click="play()">
                      <image
                        src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/yinliang2.png"
                        mode="scaleToFill"
                      />
                    </view>
                    <view class="btn_content bg3" @click="cancel()">
                      <text>返回</text>
                    </view>
                  </view>
                </template>
              </template>
              <view class="progress">
                <view>{{ currentWordIndex + 1 }}</view>
                <text>/{{ wordList.length }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-count-down
      class="countdown"
      ref="uCountDown"
      :timestamp="timestamp"
    ></u-count-down>
    <u-popup
      class="custom-popup"
      v-model="completeShow"
      :zoom="false"
      mode="center"
      width="100%"
      height="100%"
      :mask-close-able="false"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="tips">
        <view class="tips_content">
          <view class="tips_text"> 恭喜你完成了单词拼写！ </view>
          <view class="tips_btn" @click="back()">
            <text>返回</text>
          </view>
          <view class="tips_img">
            <image src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/xiaolian.png" mode="scaleToFill" />
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getWords, saveWordLearningRecord, kyw21dk } from "@/api/sync";
import reviewTabs from "./reviewTabs";

const englishAudioContext = uni.createInnerAudioContext();
englishAudioContext.autoplay = true;

export default {
  components: { reviewTabs },
  data() {
    return {
      chapterId: "",
      fxId: "",
      wordList: [],
      currentWordIndex: 0,
      wordData: {},
      wordValue: "",
      isShowTips: true,
      isShowAnswer: false,
      isShowResult: false,
      isCorrect: false,
      completeShow: false,
      timestamp: 86400,
    };
  },
  onLoad(options) {
    this.chapterId = options.chapterId;
    this.fxId = options.fxId;
    this.getData();
  },
  methods: {
    getData() {
      getWords("kyw21", this.chapterId).then((res) => {
        this.wordList = res.data;
        this.getWordInfo();
      });
    },
    getWordInfo() {
      this.wordData = this.wordList[this.currentWordIndex];
    },
    tips() {
      this.isShowTips = !this.isShowTips;
    },
    lookAnswer() {
      this.isShowAnswer = true;
    },
    submit() {
      if (this.wordData.word.trim() == this.wordValue) {
        this.isShowResult = true;
        this.isCorrect = true;
      } else {
        this.isShowResult = true;
        this.isCorrect = false;
      }
      this.saveRecord(this.isCorrect);
    },
    play() {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = this.wordData.wordAudio;
      englishAudioContext.play();
    },
    cancel() {
      this.isShowAnswer = false;
    },
    rewrite() {
      this.isShowResult = false;
      this.isCorrect = false;
    },
    next() {
      if (this.currentWordIndex === this.wordList.length - 1) {
        this.completeShow = true;
        this.completeRecord();
        return;
      } else {
        this.currentWordIndex++;
      }
      this.wordValue = "";
      this.rewrite();
      this.getWordInfo();
    },
    saveRecord(isCorrect) {
      let params = {
        pass: isCorrect ? 1 : 0,
        step: "4",
        type: "kyw21",
        wordId: this.wordData.id,
        batch: this.fxId,
      };
      saveWordLearningRecord(params);
    },
    completeRecord() {
      let params = {
        errIds: "",
        wrongCount: 0,
        fxCount: this.wordList.length,
        fxId: this.fxId,
        step: "4",
        timeDur: this.timestamp - this.$refs.uCountDown.seconds,
      };
      kyw21dk(params);
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./review1Spell";
</style>
